import * as React from 'react';
import { Spin } from 'antd'
import { Location } from 'history';
import { Helmet } from 'react-helmet'
import * as NProgress from 'nprogress';
import { Dispatch } from 'redux';
import { connect } from 'dva';
import { AppState } from '../models';
import { Layout } from '../components';
import { classnames, config, menu, settings, pure, Logger } from '../utils';

require<any>('../themes/index.less');
require<any>('./app.less');

// logger
const logger = Logger.get('routes_app');

const { Header, Bread, Footer, Sider, styles } = Layout;
const { prefix, openPages, iconFontJS, iconFontCSS, logo } = config;
// 定义最后访问的url
let lastHref;
/**
 * 页面属性
 */
interface PageProps {
  children: React.ReactElement<any>,
  location: Location,
  dispatch: Dispatch<any>,
  app: AppState,
  loading: any,
}

/**
 * APP控件
 */
const Page: React.StatelessComponent<PageProps> = ({ children, location, dispatch,
      app, loading }) => {
  const { user, siderFold, darkTheme, isNavbar, menuPopoverVisible,
      navOpenKeys, isRendered } = app;
  logger.info('app');
  logger.debug(navOpenKeys);
  if (!settings.isServer) {
    // 当前画面url
    const href = window.location.href;
    if (lastHref !== href) {
      // 进度条开始
      NProgress.start();
      if (!loading.global) {
        // 全局的loading完了后，进度条结束
        NProgress.done();
        lastHref = href;
      }
    }
  }

  // Header的参数
  const headerProps = {
    menu,
    user,
    siderFold,
    location,
    isNavbar,
    menuPopoverVisible,
    navOpenKeys,
    switchMenuPopover(): void {
      dispatch({ type: 'app/switchMenuPopver' })
    },
    logout(): void {
      dispatch({ type: 'app/logout' })
    },
    switchSider(): void {
      dispatch({ type: 'app/switchSider' })
    },
    changeOpenKeys(openKeys: Array<string>): void {
      dispatch({ type: 'app/handleNavOpenKeys', payload: openKeys })
    },
  }
  // Sider的参数
  const siderProps = {
    menu,
    siderFold,
    darkTheme,
    location,
    navOpenKeys,
    changeTheme(): void {
      dispatch({ type: 'app/switchTheme' });
    },
    changeOpenKeys(openKeys: Array<string>): void {
      dispatch({ type: 'app/handleNavOpenKeys', payload: openKeys });
    },
  }
  // Bread的参数
  const breadProps = {
    menu,
    location,
  }
  // 登陆验证
  // 如果还在验证中的话进入Nowloading
  logger.debug(isRendered);
  if (!isRendered) {
    return <div className={styles.centerdiv}><Spin spinning={true} size="large"/></div>;
  }
  // 在openPages里面的Url直接用Div包装
  if (openPages && openPages.indexOf(location.pathname) > -1) {
    return (
      <div>{children}</div>
    );
  }
  logger.debug('isNavbar');
  logger.debug(isNavbar);
  return (
    <div>
      <Helmet>
        <title>ANTD ADMIN</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="icon" href={logo} type="image/x-icon" />
        {iconFontJS && <script src={iconFontJS}></script>}
        {iconFontCSS && <link rel="stylesheet" href={iconFontCSS} />}
      </Helmet>
      <div className={classnames(styles.layout, { [styles.fold]: isNavbar ? false : siderFold }, { [styles.withnavbar]: isNavbar })}>
        {!isNavbar ? <aside className={classnames(styles.sider, { [styles.light]: !darkTheme })}>
          <Sider {...siderProps} />
        </aside> : ''}
        <div className={styles.main}>
          <Header {...headerProps} />
          <Bread {...breadProps} />
          <div className={styles.container}>
            <div className={styles.content}>
              {children}
            </div>
          </div>
          <Footer />
        </div>
      </div>
    </div>
  );
}

export default connect(({ app, loading }) => ({ app, loading }))(pure(Page));
